<template>
  <div class="allwi">
    <div class="login_head">
        <img src="./img/login_head_bg.png"/>
    </div>

  <div class="login">

    <ul class="loginbox">
      <h2>登录</h2>
      <li>
        <label class="loginicon">
          <img src="./img/login_icon1.png"/>
        </label>
        <input type="text" v-model.trim="phone" placeholder="请输入手机号"/>
        <label class="labelClear" v-show="phone" @click="phone = ''"><i class="el-icon-circle-close"></i> </label>
      </li>
      <li>
        <label class="loginicon">
          <img src="./img/login_icon2.png"/>
        </label>
        <input maxlength="4" type="text" v-model.trim="phoneCode" style="width:68%" placeholder="请输入验证码"/>
        <div @click="getcode" class="phonecode"><span>{{timerText}}</span></div>
      </li>
      <li class="libtn">
        <div class="xys">
          <el-checkbox v-model="checked"><span style="color:#666; font-weight: normal">我已阅读并同意</span></el-checkbox> <span  @click="opxieyi('yhxy.pdf')" style="color:#409EFF">《用户服务协议》</span>
        和
        <span  @click="opxieyi('grys.pdf')" style="color:#409EFF">《个人信息保护声明》</span>
        </div>
      </li>
      <li class="libtn">
        <button @click="login">用户登录</button>
      </li>
    </ul>
    {{errorText}}
    <!--<div class="showxy">*登录即同意<a target="_blank" :href="xyUrl">平台服务协议</a></div>-->
  </div>
  </div>
</template>

<script>
  import {XIEYI_URL,VIEW_PDF_URL} from '@/constants'

  export default {
    name: 'login',
    data () {
      return {
        timer: 60,
        checked: true,
        timerText: '获取验证码',
        codeSending: true,
        phone: '',
        phoneCode: '',
        xyUrl: '',
        errorText: '',
        appKey:'',
        return_url:'',
        data:'',
      }
    },
    created () {
      // this.appKey=this.$route.query.appKey || '';
      // this.return_url=this.$route.query.return_url || '';
      // this.data=this.$route.query.data || '';
      // this.getxieyi()
      // var x ='董登发'
      // var storex = this.$store.state.personCarInfo
      // storex.name = x
      // this.$store.commit('setpersonCarInfo',storex)
      var xlogin = localStorage.getItem('wxUserId') || ''
      var xwelcome = localStorage.getItem('welcome') || ''
      if(!xwelcome){
        this.$router.replace({
          path:'/personCar',
          query:{
            funCode:'start'
          }
        })
        return false;
      }
      if(xlogin){
        this.$router.replace({
          path:'/personCar',
          query:{
            funCode:'personHome'
          }
        })
        return false;
      }


    },
    mounted(){

    },
    methods: {
      opxieyi(str){

        window.location.href = VIEW_PDF_URL+'http://dqptcs.12366.com/'+str

      },

      /**
       * 找回账号
       * @returns {boolean}
       */
      goforget () {
        this.$router.push({
          path: '/authPerson',
          query: {
            funCode: 'forgetPas',
            setp: 1
          }
        })
      },
      /**
       * 用户登录
       * @returns {boolean}
       */
      login () {
        if(!this.checked){
          this.$toast('请先同意协议')
          return false;
        }
        if (!this.phone) {
          // this.$toast('请输入手机号')
          this.$toast('请输入手机号')
          return false
        }
        if (!this.$options.filters.isphone(this.phone)) {
          // this.$toast('请输入正确的手机号')
          this.$toast('请输入正确的手机号')
          return false
        }
        if (!this.phoneCode) {
          // this.$toast('请输入验证码')
          alert('请输入验证码')
          return false
        }
        this.$http.post('yxc/wxuser/login/loginBySmscode', {
          "phone":this.phone,
          "openId":localStorage.getItem('WX_UID'),
          "smscode":this.phoneCode
        }).then(res => {
          if (res.code == 200) {

              // localStorage.setItem('is_auth', res.is_auth)
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('wxUserId', res.data.id)

              this.$router.replace({
                  path: '/personCar',
                  query: {
                      funCode: 'personHome'
                  }
              })
          } else {
            this.$toast(res.message,3000)
          }

        }, error => {
          alert('登录失败,请联系客服')
        })
      },
      /**
       * 发送验证码
       * @returns {boolean}
       */
      getcode () {
        if (!this.$options.filters.isphone(this.phone)) {
          this.$toast('请输入正确的手机号',2000)
          return false
        }
        if (!this.codeSending) {
          console.log('请勿重复')
          return false
        }
        this.codeSending = false
        this.$http.post('yxc/wxuser/sendCode', null,{params:{
            phoneNumber: this.phone
          }

        }).then(info => {
          console.log(info)
          if (info.code == 200) {
            this.timerText = this.timer + 'S'
            let t = setInterval(() => {
              if (this.timer === 0) {
                this.timerText = '获取验证码'
                this.codeSending = true
                this.timer = 60
                clearInterval(t)
              } else {
                this.timer--
                this.timerText = this.timer + 'S'
              }
            }, 1000)
          } else {
            this.codeSending = true
            this.$toast(info.message)
          }
        }, error => {
          this.codeSending = true
          this.$toast('短信验证码发送失败，请重试')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .allwi{

    position: fixed;
    width:100%;height:100%;
    background: #FFF;
    overflow:auto;
    overflow-x: hidden;


  }
  .xys{
    color:#666;
    font-size:14px;
    span{
      color:#333;

    }
  }
  .login_head{
    height:180px;
    /*bac*/
    img{width:100%; height: 100%}
  }

  body{background: #fff;height:100%;}
  .showxy {
    position: absolute;bottom:0px;
    width: 100%;
    color: #666;
    left: 0;
    padding:30px 0;
    text-align: center;
    font-size:12px;

    a {
      color: #409EFF;
    }

  }

  .findpas {
    text-align: center;
    color: #666;
    font-size:14px;
  }

  .loginicon {
    width:20px;
    margin-right:10px;
    position: relative; top:3px;

    img {
      width: 90%;
    }
  }
  .labelClear{
    width:30px;
    color:#666;
    font-size:20px;
  }

  .login {
    max-width:800px;
    margin:0 auto;

    border-top-right-radius: 5px;
    border-top-left-radius:5px;
    overflow:hidden;
    background:#FFF;
    margin-top:-10px;
    position: relative;
    z-index: 99;


    h2{margin:0;font-weight: 500; text-align: center;font-size:22px; padding:20px 0 0 0;}
    .loginb {
      img {
        width: 100%;
      }
    }

    .loginbox {

      padding: 20px;

      margin:0;
      padding:0;
      padding-top:0;
      li {
        margin:0px 20px;
        padding: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;

        input[type='text'] {
          width: 100%;
          border: none;
          outline: none;
          font-size:14px;
        }

        display: flex;

        .phonecode {
          width: 32%;
          line-height: 200%;

          span {
            display: block;
            text-align: center;
            color: #409EFF;
            font-size:14px;
          }
        }

      }

      .libtn {
        border: none;

        button {
          padding:10px 0;
          border-radius: 5px;
          border: none;
          background:rgba(28,103,255,1);
          color: #FFF;
          font-size: 35px;
          /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
          width: 100%;
          font-size:18px;
        }
      }
    }
  }
  @media screen and (min-width:768px){
    .showxy {position: static;}
    .login{position: static;height:100%;}
  }
</style>
